<template>
  <el-dialog
    style="margin: 0px; height: 100vh"
    v-model="dialogVisible"
    title="设备录入"
    width="100%"
    :before-close="handleClose"
  >
    <div class="listBox">
      <el-form class="demo-form-inline" label-width="60">
        <el-row>
          <el-col :span="8" v-for="(t, idx) in formData" :key="idx" style="border-bottom: 1px solid #000">
            <div class="listItem">
              <el-form-item label="设备号">
                <el-input v-model="t.snr" :disabled="true" style="width: 240px" clearable size="small" />
              </el-form-item>
              <el-form-item label="座位号">
                <el-input v-model="t.seatNum" style="width: 240px" placeholder="请输入内容" clearable size="small" />
              </el-form-item>
              <el-form-item label="序号">
                <el-input v-model="t.sort" style="width: 240px" placeholder="请输入内容" clearable size="small" />
              </el-form-item>
              <div class="positionBtn">
                <el-button
                  type="danger"
                  size="small"
                  style="display: block; margin-bottom: 5px"
                  @click="setLight({ ...t, color: 1 }, idx)"
                  >红色指示灯</el-button
                >
                <el-button
                  type="success"
                  size="small"
                  style="display: block; margin: 0"
                  @click="setLight({ ...t, color: 2 }, idx)"
                  >绿色指示灯</el-button
                >
              </div>
            </div>
          </el-col>
          <el-col v-for="t in remainderNum" :key="t" :span="8" style="border-bottom: 1px solid #000"> </el-col>
        </el-row>
      </el-form>
    </div>
    <p>公共牌座位号填写0，序号填写1-5。座位1-5，序号1-2</p>
    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="toSubmit"> 设备录入 </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { deviceList4Test, deviceList, deviceUpload, lightSet } from "@/js/api.js";
import { ElMessage } from "element-plus";

const props = defineProps(["visible"]);
const emit = defineEmits(["update:visible"]);

const formInline = ref({});
const formData = ref([]);
const remainderNum = ref(0);
const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit("update:visible", val);
  },
});

const toSubmit = () => {
  let list = formData.value;
  let err = [];
  list.map((x, i) => {
    if (!x.seatNum || !x.sort) err.push(i + 1);
  });
  // if (err.join(",")) {
  //   ElMessage.error(`请填写第${err.join(",")}设备数据`);
  //   return;
  // }
  deviceUpload({ devices: list }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("设备录入成功");
      dialogVisible.value = false;
    }
  });
};
const setLight = (val, idx) => {
  lightSet({ deviceId: val.deviceId, color: val.color }).then((res) => {
    if (res.code == 200) {
      let color = val.color == 1 ? "红色" : "绿色";
      ElMessage.success(`设置${color}成功`);
    }
  });
};
const getDeviceList4Test = () => {
  deviceList4Test().then((res) => {
    let list = res?.data?.list || [];
    getDeviceList(list);
  });
};
const getDeviceList = (list) => {
  deviceList().then((res) => {
    let hasSnr = [];
    res.data.list.map((x) => {
      list.map((k) => {
        if (x.snr == k.snr) {
          k["seatNum"] = x.seatNum;
          k["sort"] = x.sort;
          hasSnr.push(x.snr);
        }
      });
    });
    // let noSnrList = res.data.list.filter((x) => !hasSnr.includes(x.snr));
    formData.value = [...list];
    let yu = formData.value.length % 3;
    remainderNum.value = yu > 0 ? 3 - yu : 0;
  });
};
getDeviceList4Test();
</script>

<style lang="less" scoped>
.listBox {
  // height: calc(70vh);
  overflow: auto;
  .listItem {
    // border-bottom: 1px solid #000;
    margin-bottom: 0px;
    position: relative;
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
    .positionBtn {
      position: absolute;
      bottom: 5px;
      left: 315px;
    }
  }
}
.dialog-footer {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
